<template>
  <c-select
    v-bind="$attrs"
    v-on="$listeners"
    :value="value"
    :options="cateList"
    :props="props"
  ></c-select>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      selected: null,
      cateList: [],
      loading: false,
      tableName: 'org_class_job',
      params: {
        'org_class.eq': 'org_credit',
      },
      props: {
        label: 'job_name',
        value: 'job',
      },
    }
  },
  computed: {
    css() {
      return (this.$attrs && this.$attrs.class) || 'w-100'
    },
  },
  watch: {
    value(val) {
      this.selected = val
    },
  },
  created() {
    this.selected = this.value
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params)
        .then(res => {
          this.cateList = res?.data ?? []
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleItemChange(val) {
      this.$emit('input', val)
      const select = this.cateList.find(item => item.job === val) || {}
      this.$emit('change', val, select.job_name)
    },
    getJobName() {
      const select = this.cateList.find(item => item.job === this.selected) || {}
      return this.selected ? select.job_name : ''
    },
  },
}
</script>

<style scoped></style>
